<template>
  <div class="panel" :style="{ width: width }">
    <div class="header">
      <img class="border" :src="VITE_BASE_PATH + 'images/panel_border.png'" />
      <div class="title">
        <Icon class="icon" name="book" :size="20"></Icon>
        <span>{{ title }}</span>
      </div>
    </div>
    <div class="panel-content">
        <slot></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  title: { type: String || undefined, default: undefined },
  width: { type: String || undefined, default: '380px' },
});
</script>
<style lang="scss" scoped>
.panel {
  display: flex;
  flex-direction: column;
}

.header {
  position: relative;
  padding-bottom: 12px;
  .title {
    font-size: 25px;
    font-weight: 400;
    font-family: YouSheBiaoTiHei;
    color: #fff;
    
    padding-left: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .border {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
  }
}
.panel-content{
    
}
</style>
